<template>
  <div>
    <el-row :gutter="2" style="margin-left: 30px">
      <el-col :span="4">
        <el-radio-group v-model="charQuery.radio" :span="2" size="small" @change="getList">
          <el-radio-button label="周" />
          <el-radio-button label="月" />
          <el-radio-button label="季" disabled />
        </el-radio-group>
      </el-col>
      <el-col :span="4">
        <el-date-picker
          v-model="dateValue"
          type="daterange"
          style="margin-left: 20px"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="timeFilter"
        />
      </el-col>

    </el-row>
    <el-row :gutter="10" style="margin-left: 30px; margin-top: 20px">
      <el-button
        ref="buttonFocus"
        type="primary"
        plain
        @click="changeList('经销商')"
      >经销商</el-button>
      <el-button
        type="primary"
        plain
        @click="changeList('产品库')"
      >产品库</el-button>
      <!-- <el-button
        type="primary"
        plain
        @click="changeList('内容·运营')"
      >内容·运营</el-button> -->
      <el-button
        type="primary"
        plain
        @click="changeList('互动')"
      >互动</el-button>
      <el-button
        type="primary"
        plain
        @click="changeList('资讯')"
      >资讯</el-button>
      <el-button
        type="primary"
        plain
        @click="changeList('商业配合')"
      >品牌</el-button>
      <el-button
        type="primary"
        plain
        @click="changeList('公共支持')"
      >公共支持</el-button>
      <el-button
        type="primary"
        plain
        @click="changeList('电商')"
      >电商</el-button>
      <el-button
        type="primary"
        plain
        @click="changeList('孵化')"
      >孵化</el-button>
      <el-button
        type="primary"
        plain
        @click="changeList('财务')"
      >财务</el-button>
      <el-button
        type="primary"
        plain
        @click="changeList('二手车')"
      >二手车</el-button>
    </el-row>
    <el-row style="margin-left: 30px; margin-top: 20px">
      <el-col>
        <el-card class="box-card">
          <span
            v-if="bugs !== ''"
            style="font-size: 15px; font-weight: bold; margin-left: 10px"
            class="mark-item"
          >{{ pro_count_text }}</span>
        </el-card>
      </el-col>
    </el-row>
    <div class="chart-container" style="margin: 30px">
      <el-row :gutter="10">
        <el-col :span="24">
          <div class="mark_chart">
            <span
              style="font-size: 15px; font-weight: bold; margin-left: 10px"
              class="mark-item"
            >{{ choose_btn }}项目组数据</span>
          </div>
        </el-col>
      </el-row>
      <el-row class="charrow" style="margin: 30px" :gutter="20">
        <el-col :span="12">
          <!--                //项目占比，饼图-->
          <Bingtu :width="'650px'" :chart-data="chardata.demand_type" />
        </el-col>

        <el-col :span="12">
          <!--                //项目bug统计-->
          <div class="chart-container">
            <Zztu :width="'650px'" :chart-data="chardata.pro_bug" />
          </div>
        </el-col>
      </el-row>
      <el-row class="charrow" style="margin: 30px" :gutter="10">
        <el-col :span="24">
          <Zztu :width="'1500px'" :chart-data="chardata.bug_personnel" />
        </el-col>
        <!--        之后再做-->
        <!--              <el-col :span="8">-->
        <!--                &lt;!&ndash;        //准时率&ndash;&gt;-->
        <!--                <Zxtu :width="'500px'" />-->
        <!--              </el-col>-->
        <!--              <el-col :span="8">-->
        <!--                &lt;!&ndash;        //周质量（三个率）&ndash;&gt;-->
        <!--                <Zxtu :width="'500px'" />-->
        <!--              </el-col>-->
      </el-row>
      <el-row class="charrow">
        <el-button
          type="warning"
          @click="getchangeListQus()"
        >项目详情</el-button>
        <el-table
          :key="tableKey"
          :header-cell-style="{ background: 'dodgerblue', color: '#f7fcdd' }"
          :data="list"
          fit
          highlight-current-row
          style="margin-top: 10px; width: 100%"
        >
          <el-table-column v-if="true" label="PID" width="60px" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.pro_id }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="showReviewer"
            label="项目"
            width="220px"
            align="center"
          >
            <template slot-scope="{ row }">
              <span>{{ row.project_name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="showReviewer"
            label="版本"
            width="200px"
            align="center"
          >
            <template slot-scope="{ row }">
              <span>{{ row.version }}</span>
            </template>
          </el-table-column>
          <el-table-column label="需求类型" width="150px" align="center">
            <template slot-scope="scope">
              <el-tag
                v-if="scope.row.demand_type == 1"
                effect="plain"
                :type="'primary'"
                disable-transitions
              >标准需求
              </el-tag>
              <el-tag
                v-else-if="scope.row.demand_type == 2"
                effect="plain"
                :type="'success'"
              >验收需求</el-tag>
              <el-tag
                v-else-if="scope.row.demand_type == 3"
                effect="plain"
                :type="'danger'"
              >生产事故</el-tag>
              <el-tag
                v-else-if="scope.row.demand_type == 4"
                effect="plain"
                :type="'warning'"
              >线上bug</el-tag>
              <el-tag
                v-else-if="scope.row.demand_type == 5"
                effect="plain"
                :type="'info'"
              >紧急发版</el-tag>
              <!-- <el-tag v-else style="margin-left: 10px">接口自动化</span> -->
            </template>
          </el-table-column>
          <el-table-column label="状态" width="150px" align="center">
            <template slot-scope="scope">
              <el-tag
                v-if="scope.row.status == 1"
                effect="plain"
                :type="'success'"
                disable-transitions
              >测试中</el-tag>
              <el-tag
                v-else-if="scope.row.status == 2"
                effect="plain"
                :type="'info'"
              >测试完成</el-tag>
              <el-tag
                v-else-if="scope.row.status == 3"
                effect="plain"
                :type="'danger'"
              >已上线</el-tag>
              <!-- <el-tag v-else style="margin-left: 10px">接口自动化</span> -->
            </template>
          </el-table-column>
          <el-table-column label="完成时间" width="160px" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.end_time | parseTime("{y}-{m}-{d}") }}</span>
            </template>
          </el-table-column>
          <el-table-column label="上线时间" width="160px" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.online_time | parseTime("{y}-{m}-{d}") }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="showReviewer"
            label="bug率"
            width="80px"
            align="center"
          >
            <template slot-scope="{ row }">
              <span>{{ row.bug_rate }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="showReviewer"
            label="修复率"
            width="80px"
            align="center"
          >
            <template slot-scope="{ row }">
              <span>{{ row.fix_rate }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="showReviewer"
            label="无效修改率"
            width="100px"
            align="center"
          >
            <template slot-scope="{ row }">
              <span>{{ row.unfix_rate }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="showReviewer"
            label="发布成功率"
            width="100px"
            align="center"
          >
            <template slot-scope="{ row }">
              <span>{{ row.online_rate }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="showReviewer"
            label="bug总数"
            width="80px"
            align="center"
          >
            <template slot-scope="{ row }">
              <span>{{ row.bug_sum }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 100"
          :total="total"
          :page.sync="listQuery.page_num"
          :limit.sync="listQuery.page_per"
          @pagination="getList"
        />
      </el-row>
    </div>
    <CollectQuestion
      v-if="dialogAdd.show"
      ref="popBox"
      :size-forms="dialogCollectQuestionData"
      destroy-on-close="true"
      :title="dialogCollectQuestionData.group_name + '-项目详情'"
      @closePop="closePop"
    />
  </div>
</template>

<script>
// import Zxtu from './MixLineChart'
import Zztu from './LineChart'
import Bingtu from './PanelGroup'
import { getProjectList, getCollectPro } from '@/api/quality'
import Pagination from '@/components/Pagination'
import CollectQuestion from './collect-question'

export default {
  name: 'ProQuality',
  components: {
    Pagination,
    // Zxtu,
    Zztu,
    Bingtu,
    CollectQuestion
  },
  data() {
    return {
      pro_count_text: '',
      chardata: {
        demand_type: {},
        pro_bug: {},
        bug_personnel: {}
      },
      dialogAdd: {
        show: false
      },
      dialogCollectQuestionData: {
        group_name: '经销商',
        radio: '周'
      },
      charQuery: {
        group_name: '经销商',
        radio: '周'
      },
      listQuery: {
        group_name: '经销商',
        project_name: '',
        page_num: 1,
        page_per: 50,
        start_time: '',
        end_time: '',
        demand_type: '',
        status: '',
        project_str: ''
      },
      charshow: true,
      dateValue: '',
      demand_type: {},
      tableKey: 0,
      showReviewer: true,
      list: null,
      total: 0,
      char_data: '',
      choose_btn: '',
      project_test: {
        test: 0,
        project: ''
      },
      project_testing: {
        testing: 0,
        project: ''
      },
      project_online: {
        online: 0,
        project: ''
      },
      bugs: 0,
      d1: {
        name: '访问来源',
        data: [
          { value: 48, name: '搜索引擎' },
          { value: 1735, name: '直接访问' },
          { value: 5280, name: '邮件营销' },
          { value: 4834, name: '联盟广告' },
          { value: 3001, name: '视频广告' }
        ]
      },
      d2: {
        name: '李蒙沙子',
        data: [
          { value: 1048, name: '搜1索引擎' },
          { value: 735, name: '直1接访问' },
          { value: 580, name: '邮1件营销' },
          { value: 484, name: '联1盟广告' },
          { value: 300, name: '视1频广告' }
        ]
      }
    }
  },
  // mounted() {
  //   this.getList()
  //   this.$refs.buttonFocus.$el.focus()
  // },
  // created(){
  //   this.getList()
  //   this.$refs.buttonFocus.$el.focus()
  //   },
  methods: {
    getProListData() {
      this.getList()
      this.$refs.buttonFocus.$el.focus()
    },
    closePop() {
      this.dialogAdd.show = false
    },
    changeList(gn) {
      this.choose_btn = gn
      this.listQuery.group_name = gn
      this.charQuery.group_name = gn
      this.getList()
    },
    getchangeListQus() {
      this.dialogAdd.show = true
      this.dialogCollectQuestionData.group_name = this.choose_btn
      this.dialogCollectQuestionData.radio = this.charQuery.radio
    },
    get_pro_char() {
      this.charshow = true
      getCollectPro(this.charQuery).then((response) => {
        if (response.data.demand_type.data.length === 0) {
          this.charshow = false
        }
        this.chardata.demand_type = response.data.demand_type
        this.chardata.pro_bug = response.data.pro_bug
        this.chardata.bug_personnel = response.data.bug_personnel
      })
    },
    timeFilter() {
      if (this.dateValue === null) {
        this.listQuery.start_time = ''
        this.listQuery.end_time = ''
        this.charQuery.radio = '周'
      } else {
        this.charQuery.radio = this.dateValue
      }
      // console.log(this.charQuery.radio)
      this.getList()
      this.get_pro_char()
    },
    getList() {
      const edate = new Date()
      const sdate = new Date()
      this.choose_btn = this.listQuery.group_name
      this.listQuery.end_time = edate.getFullYear() + '-' + (edate.getMonth() + 1) + '-' + edate.getDate()
      if (this.charQuery.radio === '周') {
        this.dateValue = null
        sdate.setTime(edate.getTime() - 3600 * 1000 * 24 * 7)
        this.listQuery.start_time = sdate.getFullYear() + '-' + (sdate.getMonth() + 1) + '-' + (sdate.getDate())
      } else if (this.charQuery.radio === '月') {
        this.dateValue = null
        sdate.setTime(edate.getTime() - 3600 * 1000 * 24 * 30)
        this.listQuery.start_time = sdate.getFullYear() + '-' + (sdate.getMonth() + 1) + '-' + (sdate.getDate())
      } else {
        this.listQuery.start_time = this.charQuery.radio[0]
        this.listQuery.end_time = this.charQuery.radio[1]
      }
      this.get_pro_char()
      getProjectList(this.listQuery).then((response) => {
        this.project_test.test = 0
        this.project_testing.testing = 0
        this.project_online.online = 0
        this.list = response.data.items
        this.total = response.data.total
        this.bugs = response.data.bugs
        this.pro_count_text = ''
        var pList = this.list
        if (pList.length > 0) {
          for (var i = 0; i < pList.length; i++) {
            if (pList[i].status === '1') { //  status == 1 测试中
              this.project_testing.testing++
              //  this.project_testing.project="["+this.project_testing+pList[i].version+"]"
            }
            if (pList[i].status === '2') { //  status == 2 测试完成
              this.project_test.test++
              // this.project_test.project="["+this.project_test+pList[i].version+"]"
            }
            if (pList[i].status === '3') { //  status == 3 已上线
              this.project_online.online++
              // this.project_online.project="["+this.project_online+pList[i].version+"]"
            }
          }
          if (this.project_testing.testing > 0) {
            this.pro_count_text = this.project_testing.testing + '个版本测试中; '
          }
          if (this.project_test.test > 0) {
            this.pro_count_text = this.pro_count_text + this.project_test.test + '个版本测试完成; '
          }
          if (this.project_online.online > 0) {
            this.pro_count_text = this.pro_count_text + this.project_online.online + '个版本已上线; '
          }
          if (this.bugs > 0) {
            this.pro_count_text = this.pro_count_text + '共' + this.bugs + '个Bug'
          }
        } else {
          this.pro_count_text = '无参与统计项目'
        }
      })
    }
  }
}
</script>

<style scoped>
.charrow {
  margin-top: 50px;
}
.mark_chart {
  border-radius: 4px;
  background-color: #a5e7f0;
  height: 30px;
  width: 100%;
  line-height: 30px;
  color: #fff;
}
.mark-item-no {
  border-radius: 4px;
  /*background-color: #808282;*/
  height: 30px;
  width: 30%;
  line-height: 30px;
  color: #010709;
}
.chart-container {
  position: relative;
  width: 100%;
  height: 60%;
}
.box-card {
  width: 600px;
}
</style>
